<template>
	<page-meta>
		<navigation-bar title="乐居" background-color="#354e44" />
	</page-meta>
	<view class="update">
		<view class="update-modify">
			<view @tap="modifyUserInfo" class="update-modify-btn">修改用户信息</view>
		</view>
		<view class="update-info">
			<view class="update-info-label">头像</view>
			<image class="update-info-desc update-info-img" :src="userInfo.icon" ></image>
		</view>
		<view class="update-info">
			<view class="update-info-label">用户名</view>
			<view class="update-info-desc">{{userInfo.username}}</view>
		</view>
		<view class="update-info">
			<view class="update-info-label">昵称</view>
			<view class="update-info-desc">{{userInfo.nickname}}</view>
		</view>
		<view class="update-info">
			<view class="update-info-label">手机号</view>
			<view class="update-info-desc ">{{userInfo.phone}}</view>
		</view>
		<view @tap="exitLogin" class="update-exit">退出登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{}
			}
		},
		onLoad() {
			this.userInfo=uni.getStorageSync('userInfo');
		},
		methods: {
			//修改用户信息
			modifyUserInfo(){
				uni.navigateTo({
					url:'../modifyInfo/modifyInfo'
				})
			},
			//退出登录
			exitLogin(){
				uni.removeStorageSync('token');
				uni.navigateTo({
					url:'../login/login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.update{
	width: 100%;
	height: 100%;
	min-height: 100vh;
	background-color: #f1ece7;
	box-sizing: border-box;
	padding: 60rpx 30rpx;
	&-modify{
		display: flex;
		justify-content: flex-end;
		&-btn{
			border: 1rpx solid #333333;
			width: 300rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 10rpx;
			text-align: center;
		}
	}
	&-info{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 10rpx;
		border-bottom: 1rpx solid #ddd;
		line-height: 100rpx;
		&-desc{
			color: gray;
		}
		&-img{
			display: block;
			width: 120rpx;
			height: 120rpx;
		}
	}
	&-exit{
		width: 370rpx;
		height: 88rpx;
		color: #FFFFFF;
		background-color: #1c4b47;
		margin: 200rpx auto 0;
		text-align: center;
		line-height: 88rpx;
		border-radius: 15rpx;
	}
}
</style>
